<template>
	<view>
		<view class="top_time">
			<view class="restaurant">
				<span class="time">时间</span>
				<picker mode="date" :value="time" @change="bindDateChange">
					<text>{{time}}</text>
				</picker>
			</view>
		</view>
		<view class="canpin" v-for="(item,index) in list" :key="index">
			<view class="dameArrs">
				<view style="margin-bottom: 1%;">
					<text style="color: #8b8b8b;">菜品名称</text>：<text>{{item.name}}</text>
				</view>
				<view style="margin-bottom: 1%;">
					<text style="color: #8b8b8b;">价格</text>：<text style="color: #ff0000;">￥{{item.price}}</text>
				</view>
				<view style="margin-bottom: 1%;">
					<text style="color: #8b8b8b;">餐别</text>：<text>{{item.timesText}}</text>
				</view>
				<view style="margin-bottom: 1%;">
					<text style="color: #8b8b8b;">菜品分类</text>：<text>{{item.cate_name}}</text>
				</view>
				<view style="margin-bottom: 1%;">
					<text style="color: #8b8b8b;">菜品状态</text>：<text>{{item.pstateText}}</text>
				</view>
			</view>
		</view>
		<view class="whole" v-if="list.length <= 0">
			<image class="image" src="/static/image/zanwushuju@2x.png" mode="aspectFit"></image>
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				time: null,
				list: []
			}
		},
		created() {
			this.getDate();
			this.getData();
		},
		onPullDownRefresh() {
			this.getDate();
			this.getData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
		methods: {
			//获取数据
			async getData() {
				let time = this.time.split("/");
				const res = await this.$dietRequest({
					url: '/api-baiyun/getSchedule?shopname=白云颐养中心&date=' + time[0] + "-" + time[1] + "-" +
						time[2],
					method: "get",
				})
				if (res.success == true) {
					this.list = res.data.list;
				}
			},
			//选择时间
			bindDateChange: function(e) {
				let arr = e.detail.value.split("-");
				this.time = arr[0] + '/' + arr[1] + '/' + arr[2];
				this.getData();
			},
			//获取当前时间
			getDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				month = month > 9 ? month : "0" + month;
				day = day > 9 ? day : "0" + day;
				this.time = year + '/' + month + '/' + day;
			}
		}
	}
</script>

<style lang="scss">
	.top_time {
		width: 100%;
		background-color: #FFFFFF;
		.restaurant {
			width: 65%;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			margin-left: 35%;

			.time {
				color: #000000;
				font-weight: bold;
				line-height: 100rpx;
			}

			picker {
				width: 200rpx;
				height: 70rpx;
				margin-left: 2%;
				border: 1px solid #000000;
				border-radius: 15rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}

	.canpin {
		width: 100%;
		background-color: #ffffff;

		.dameArrs {
			width: 90%;
			margin: 5% auto 1% auto;
			padding: 2% 0;
			display: grid;
			grid-template-columns: 350rpx 300rpx;
			;
		}
	}

	.whole {
		text-align: center;
		font-size: 60rpx;
		color: #959595;

		.image {
			margin: 320rpx 0 50rpx 0;
			width: 100%;
			height: 350rpx;
		}
	}
</style>
